import axios from "axios";
// import { MessageBox, Message } from 'element-ui'
import store from "@/store";
// import { getToken } from '@/utils/auth'
import { Message } from "element-ui";

// create an axios instance
console.log(process.env); //{NODE_ENV: 'development', VUE_APP_BASE_API: '/dev-api', BASE_URL: '/'}
console.log(process.env.VUE_APP_BASE_API); //输出/dev-api重启后输出/api
const request = axios.create(
  {
    //基准地址是http://ihrm.itheima.net/api
    //自己配置的接口看api/user.js里为sys/login
    // baseURL: "/api",
    //再次运行登录即可拿到res
    //网络里为http://localhost:2333/api/sys/login(会和域名拼接)
    //然后vueconfigurejs里的proxy会对上面这个拦截变为target
    //上面的baseURL: "/api",再次改为
    baseURL: process.env.VUE_APP_BASE_API,
    //再次改动是因为可以和env点development里的base api联动一下
    //所以在上方先打印process.env来看看输出是什么
    //process不需要引入，本就是node下的一个变量
  }
  // {
  //   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  //   // withCredentials: true, // send cookies when cross-domain requests
  //   timeout: 5000 // request timeout
  // }
);

// request interceptor请求拦截器
request.interceptors.request.use(
  // config => {
  //   // do something before request is sent

  //   if (store.getters.token) {
  //     // let each request carry token
  //     // ['X-Token'] is a custom headers key
  //     // please modify it according to the actual situation
  //     config.headers['X-Token'] = getToken()
  //   }
  //   return config
  // },
  // error => {
  //   // do something with request error
  //   console.log(error) // for debug
  //   return Promise.reject(error)
  // }
  (config) => {
    //获取到本地存储里的token
    const token = store.state.user.token;
    //判token是否存在
    if (token) {
      config.headers.Authorization = "Bearer " + token; //Bearer后面一定要有个空格
    }
    return config;
  }
);

// response interceptor
//响应拦截器，处理接口返回数据的逻辑
request.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
   */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  // response => {
  //   const res = response.data

  //   // if the custom code is not 20000, it is judged as an error.
  //   if (res.code !== 20000) {
  //     Message({
  //       message: res.message || 'Error',
  //       type: 'error',
  //       duration: 5 * 1000
  //     })

  //     // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
  //     if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
  //       // to re-login
  //       MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
  //         confirmButtonText: 'Re-Login',
  //         cancelButtonText: 'Cancel',
  //         type: 'warning'
  //       }).then(() => {
  //         store.dispatch('user/resetToken').then(() => {
  //           location.reload()
  //         })
  //       })
  //     }
  //     return Promise.reject(new Error(res.message || 'Error'))
  //   } else {
  //     return res
  //   }
  // },
  // error => {
  //   console.log('err' + error) // for debug
  //   Message({
  //     message: error.message,
  //     type: 'error',
  //     duration: 5 * 1000
  //   })
  //   return Promise.reject(error)
  // }
  (response) => {
    //把后端返回的接口请求数据解构
    const { success, message, data } = response.data; //success是true或false  axios包了一层data
    //前面的data是后端返回的数据里的data项，后面的data是axios包裹的data
    //若success是true则数据可用，返回data
    //若success是false则数据不可用，提示message消息错误
    if (success) {
      return data; //然后去modules/user.js里的res的data就不能叠两层了,因为上面的两个data，其实就已经是点data点data了，那边直接写res就是token值了
    } else {
      Message.error(message); //message为后端返回的错误消息
      return Promise.reject(message);
    } //下面是错误的处理函数,除了200的状态码，其他的都会走下面的错误
  },
  (err) => {
    Message.error(err.message);
    //若请求出错
    return Promise.reject(err);
  } //然后去login下的index.vue
);

export default request;
